<template>
  <div class="loginpage">
<div class="logocontainer">
    <div class="logohead">
      <img src="../../assets/images/logo.png" class="logo" alt="logo" width="50" height="50">
        <h2>欢迎回来</h2>
    <h5>请先登录</h5>
 </div>
   <el-form :model="passwordInfo" :rules="rules" ref="ruleForm" >
  <el-form-item  prop="account">
    <el-input type="text"   prefix-icon="iconfont icon-account"  v-model="passwordInfo.account" autocomplete="off">
        </el-input>
  </el-form-item>
  <el-form-item  prop="password">
    <el-input :type="passwordtype" prefix-icon="iconfont icon-password" v-model="passwordInfo.password" autocomplete="off">
       <i slot="suffix" class="iconfont" 
       :class="{'icon-eyeopen':passwordtype==='text' , 'icon-eyeclose':passwordtype==='password'}" 
       @click="changeInputType"></i>
    </el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">登录</el-button>
  </el-form-item>
</el-form>

</div>
    </div>

</template>

<script>
import {checkLogin} from '@/api/user'
import {validateAccount,validatePassword} from '@/utils/tools'
import local from '@/utils/local'
import {createRouters} from '@/router/index'
export default {
  name: "Login",
  data() {

    return {
      passwordInfo: {
        account:'',
        password:''
      },
      rules: {
        account:[ { required: true, validator: validateAccount, trigger: 'blur'},
           ],
        password:[ { required: true,validator: validatePassword, trigger: 'blur' },
           ]
      },
      passwordtype:'password'
    };
  },
  methods: {
    submitForm() {

      this.$refs.ruleForm.validate(async (valid)=>{
        if(valid){
          // console.log('验证通过');
          let res = await checkLogin(this.passwordInfo);
          console.log(res);
          let {data} = res;
          if(data.code==0){
            local.set('t_k',data.token)
            local.set('role',data.role)
            // 存入角色之后  路由跳转之前 需要计算好动态路由（调用函数）
           createRouters()
      
        this.$router.push('/');
          }
          
        }else{
       
          return false
          
        }

      })
      console.log('aaa');
      
    },
    changeInputType(){
      this. passwordtype = this. passwordtype==='password'?'text':'password';

    }
  },
};
</script>

<style lang="less" scoped>
.loginpage {
  height: 100%;
  background-color: #304156;
  display: flex;
  justify-content: center;
  align-items: center;
  color:aliceblue;
  .logocontainer {
    width: 400px;
    height: 300px;

    .logohead {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
      h2 {
        margin-right: 10px;
      }
      .logo {
        margin-right: 10px;
      }
    
    }
      .el-button{
        width: 100%;
      }
      .el-input{
        // 穿透scoped 覆盖elmentui的样式
        /deep/ .el-input__inner {
        background-color:transparent;
        color:#fff;
        letter-spacing: 1px;

        }

      }
      

  }
}
</style>